<template>
    <div>
        <!-- <div class="img" >
            <tailoring></tailoring>
        </div> -->
			<h1 class="bttt">添加会员</h1>
<!--        <cropper-image></cropper-image>-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
            <el-form-item label="电话" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item>
            <el-form-item label="密码" prop="password"><el-input placeholder="请输入密码" v-model="ruleForm.password" show-password></el-input></el-form-item>
            <el-form-item label="邮箱" prop="email"><el-input v-model="ruleForm.email"></el-input></el-form-item>
          <el-form-item label="状态" prop="status">
              <el-switch v-model="ruleForm.status" active-color="#13ce66" inactive-color="#ff4949" @change="handleStatus(ruleForm.Status)">
          </el-switch></el-form-item>
          <el-form-item label="单位" prop="">
                <el-select v-model="ruleForm.company" placeholder="请选择单位">
                    <el-option v-for="c in companys" :label="c" :value="c" :key="c">{{ c }}</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="专长" prop="specialty">
                <el-input v-model="ruleForm.specialty"></el-input>
            </el-form-item>

            <el-form-item label="号码牌编号" prop="numberCard">
                <el-input v-model="ruleForm.numberCard">
                    <template slot="prepend">
                        0010-
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addTExpert()">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    import tailoring from './Tailoring.vue'
/*    import CropperImage from '@/components/CropperImage.vue'*/
    export default {
        name: 'addMember',
        components:{
            tailoring
        },
        data() {
            return {
                companys: ['济南市中心医院', '齐鲁医院', '山大二院'],
                specialtys: ['儿科', '神经内科', '皮肤科', '消化科'],

                ruleForm: {
                    name: '张三',
                    sex: '男',
                    phone: '13861600000',
                    password: 'zjp12345678',
                    email:'123456789@qq.com',
                    status: true,
                    specialty: 'Testzhuanyel',
                    company: '创新谷',
                    NumberCard: '001'

                },
                rules: {
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    phone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { pattern: /^[1][3578]\d{9}$/, message: '请输入正确的手机号' }],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '长度至少为8，至少含有一个字母和一个数字' }
                    ],

                    // specialty: [{ type: 'array', required: true, message: '请至少选择一个专业领域', trigger: 'change' }],
                    company: [ { required: true, message: '请选择工作单位', trigger: 'change' }],
                    numberCard: [
                        { required: true, message: '会员编号不能为空', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            addTExpert() {
                        // alert("规则验证成功！")
                        console.log(this.ruleForm);
                        let that=this
                        let obj= {
                            headImg:2,
                            memName:that.ruleForm.name,
                            sex:that.ruleForm.sex,
                            phone:that.ruleForm.phone,
                            password:that.ruleForm.password,
                            email:that.ruleForm.email,
                            // status:that.ruleForm.Status,
                            status:that.ruleForm.status?'1':'0',
                            createDate:dayjs().format('YYYY-MM-DD HH:mm:ss'),
                            lastTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
                            company:that.ruleForm.company,
                            specialty:that.ruleForm.specialty,
                            numberCard:'0010'+that.ruleForm.numberCard,
                            auditBy:2,
                            auditDate:dayjs().format('YYYY-MM-DD HH:mm:ss'),
                        }
                        // console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
                        this.$axios.post(
                            'http://localhost:7070/api/Administration/AddMember',
                            that.$qs.stringify(obj)
                        ).then(function (response) {
                            // alert("返回值："+response.data)
                            if(response.data){
                                alert("添加成功！")
                                that.$router.push({'path':'/mycenter/member'})
                            }
                            else alert('添加失败！')
                        })


            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleStatus(value){
                console.log(value)
                // value.Status=! value.Status
                this.Status = !this.Status
            },
        }
    };
</script>

<style>
	
	.bttt {
		width: 300px;
		margin: 0 auto;
		margin-bottom: 50px;
	}
    .demo-ruleForm {
        width: 60%;
		margin: 0 auto;
    }
    .el-form-item__content {
        text-align: left;
    }
</style>
